<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">申请售后</text>
		</navBar>

		<scroll-view scroll-y
			:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
			class="mian_applyService ">

			<!-- 普通商品 -->
			<template v-if="commonityItem.type == 1">
				<view class="shoppingList_item pd10"
					v-for="(item,index) in commonityItem.commodityInfo"
					:key="index">
					<view class="shoppingList_item_top">
						<view class="checkbox">
							<!--<checkbox @click="tapSpuCkeched(index)"
								:checked="item.spuChecked"
								color="#ec4141"
								style="transform:scale(0.7);border-radius: 50%;"></checkbox> -->
								<u-checkbox-group
									@change="tapSpuCkeched($event,index)">
									<u-checkbox :checked="item.spuChecked" :name="true" active-color="red"></u-checkbox>
								</u-checkbox-group>
						</view>
						<view class="item_img pd10" v-if="updateNoneImg">
							<image style="width: 100%;height: 100%;"
								mode="aspectFill"
								:src="item  && 
								item.spuInfo && 
								item.spuInfo.picture ? 
								uploadImgUrl + item.spuInfo.picture : computedMorentu"></image>
						</view>
						<view class="item_right ml5">
							<view class="item_right_name texttowShow">
								{{item && item.spuInfo && item.spuInfo.name ? item.spuInfo.name : ''}}
							</view>
							<view class="item_right_unit">
								<view class="">
									共{{item.qty}}件
								</view>

							</view>

						</view>
					</view>
					<view v-for="(it,inx) in item.children"
						class="shoppingList_item_bom">
						<view style="width: 60rpx;"></view>
						<view class="shoppingList_item_bom_r mtb10">
							<view class="shoppingList_item_bom_r_t">
								<view class="shoppingList_item_bom_r_l">
									<!-- <checkbox @click="tapSkuChecked(index,inx)"
										:checked="it.skuChecked"
										color="#ec4141"
										style="transform:scale(0.7);border-radius: 50%;"></checkbox> -->
										
										<u-checkbox-group
											@change="tapSkuChecked(index, inx)">
										
											<u-checkbox :checked="it.skuChecked" :size="normal"  :name="true" active-color="red"></u-checkbox>
										</u-checkbox-group>

									<text
										class="price mr10">￥{{it.price ? Utils.formatToFixed(it.price,'price') : 0}}</text>

									<text class="unit">{{
											it.skuInfo &&
										 	it.skuInfo.unitInfo && 
										 	it.skuInfo.unitInfo.name &&
										 	it.skuInfo.specsOptionInfo && 
										 	it.skuInfo.specsOptionInfo.length ? 
										 	it.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
											' / ' +
											it.skuInfo.unitInfo.name :
										 	it.skuInfo.unitInfo.name
									 }}</text>
								</view>
								<view class="shoppingList_item_bom_r_r"
									style="width:200rpx">
									<u-number-box>
										<view slot="minus"
											@click="delNum(it)"
											class="minus"
											:style="{background:it.qty <= 1 ? 'rgba(255, 0, 0, 0.5)' : 'rgba(255, 0, 0, 1)'}"
											>
											<u-icon name="minus"
												size="12"></u-icon>
										</view>
										<u-input border='none'
											style="width: 50px;text-align: center;"
											class="input"
											inputAlign='center'
											slot="input"
											type='number'
											v-model="it.qty"
											@input="inputNum(it, index, inx)"
											@blur='blurNum(it)'>
										</u-input>
										<!-- <text slot="input"
											style="width: 50px;text-align: center;"
											class="input"></text> -->
										<view slot="plus"
											@click="addNum(it)"
											class="plus">
											<u-icon name="plus"
												color="#FFFFFF"
												size="12"></u-icon>
										</view>
									</u-number-box>
								</view>
							</view>
							<!-- <view 
							v-if="it.oldPrice > it.price"
							class="shoppingList_item_bom_r_b">
								比加入时降价{{it.oldPrice > it.price ? Utils.formatToFixed(it.oldPrice - it.price,'price') : 0}}
							</view> -->
						</view>

					</view>
				</view>
			</template>

			<!-- 活动商品 -->
			<template v-if="commonityItem.type == 2">

				<view v-for='(item,index) in commonityItem.commodityInfo'
					:key="index"
					class="mian_allOrder_list_item pd_lr10">

					<view class="list_item_conter pd10">
						<view class="list_item_conter_top"
							:class="{active : item.checked[0]}">
							<view class="list_item_checked">
								<!-- <checkbox @click="selectChecked(index)"
									color="#fff"
									:checked="item.checked"
									style="transform:scale(0.7);border-radius: 50%;"></checkbox> -->
									<u-checkbox-group
										@change="selectChecked(index)">
										<u-checkbox :checked="item.checked" :name="true" active-color="red"></u-checkbox>
									</u-checkbox-group>
							</view>
							<view class="list_item_conter_top_img" v-if="updateNoneImg">
								<image :src="item.spuInfo && 
								 item.spuInfo.picture ? 
								 uploadImgUrl + item.spuInfo.picture :
								  computedMorentu"></image>
							</view>
							<view class="list_item_conter_top_text ml5">
								<view class="list_item_conter_top_text_top texttowShow">
									{{item.spuInfo &&
									item.spuInfo.name ? 
									item.spuInfo.name : ''}}
								</view>
								<view class="list_item_conter_top_text_bom ">
									<view class="list_item_conter_top_text_bom_item mt10">
										<text class="list_item_conter_top_text_bom_item_l">
											<text style="color: #ec4141;font-size: 28rpx;font-weight: bold;"
												class="mr10">￥{{item.price ? Utils.formatToFixed(item.price,'price') : 0}}
											</text> {{item.skuInfo && 
											item.skuInfo.specsOptionInfo && 
											item.skuInfo.specsOptionInfo.length && 
											item.skuInfo.unitInfo && 
											item.skuInfo.unitInfo.name ? 
										   item.skuInfo.specsOptionInfo.map(it=>it.optionName).join('-') + ' / ' + item.skuInfo.unitInfo.name  :
											item.skuInfo.unitInfo.name }}</text>
										<view class="list_item_conter_top_text_bom_item_r"
											style="width:200rpx;">
											<u-number-box>
												<!-- @click="delNum(item)" -->
												<view slot="minus"
													class="active minus"
													style="display: none;">
													<u-icon name="minus"
														style="display: none;"
														size="12"></u-icon>
												</view>
												<u-input border='none'
													style="width: 50px;text-align: center;"
													class="input"
													inputAlign='center'
													slot="input"
													type='number'
													disabled
													v-model='item.qty'
													@blur='blurNum(item)'>
												</u-input>
												<!-- <text slot="input"
													style="width: 50px;text-align: center;"
													class="input"></text> -->
												<!-- @click="addNum(item)" -->
												<view slot="plus"
													style="display: none;"
													class="plus">
													<u-icon name="plus"
														color="#FFFFFF"
														size="12"></u-icon>
												</view>
											</u-number-box>
										</view>
									</view>
									<!-- <view v-if="item.activityType == 2" class="biaoqian">
										优惠：{{item.preferential ? Utils.formatToFixed(item.preferential,'price') : 0}}元
									</view>
									<view v-if="item.type == 1" class="biaoqian">
										秒杀优惠
									</view> -->
								</view>
							</view>
						</view>
						<template v-if="commonityItem.activityType == 1 && item.children && item.children.length">
							<view v-for="(it,inx) in item.children"
								:key="inx"
								class="list_item_conter_bom mt10">
								<view class="list_item_conter_top_img" v-if="updateNoneImg">
									<image class="zenpin"
										:src="xcxImgUrl && xcxImgUrl+'zengpin.svg'"></image>
									<image :src="it.spuInfo && 
								 it.spuInfo.picture ? 
								 uploadImgUrl + it.spuInfo.picture :
								  computedMorentu"></image>
								</view>
								<view class="list_item_conter_top_text ml5">
									<view class="list_item_conter_top_text_top texttowShow">
										{{it.spuInfo && 
										 it.spuInfo.name ? 
										 it.spuInfo.name : ''}}
									</view>
									<view class="list_item_conter_top_text_bom ">
										<view class="list_item_conter_top_text_bom_item mt10">
											<text class="list_item_conter_top_text_bom_item_l">赠品：{{it.skuInfo && 
											it.skuInfo.specsOptionInfo && 
											it.skuInfo.specsOptionInfo.length && 
											it.skuInfo.unitInfo && 
											it.skuInfo.unitInfo.name ? 
											 it.skuInfo.specsOptionInfo.map(it=>it.optionName).join('-') + ' / ' + it.skuInfo.unitInfo.name :
											it.skuInfo.unitInfo.name }} X{{it.qty ? it.qty : 0}}</text>
											<text class="list_item_conter_top_text_bom_item_r"> </text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>

				</view>
			</template>
		</scroll-view>

		<view class="mian_applyBom">
			<view class="mian_applyBom_number mr10">
				合计：{{computedCountNum}}件
			</view>
			<view @click="computedCountNum ? returnCause() : ''"
				class="mian_applyBom_btn"
				:style="{background:!computedCountNum ? '#ccc' : ''}">
				退货
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		uploadImgUrl
	} from '@/utils/request.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回默认图
			computedMorentu() {
				return this.$store.state.morentu
			},
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
			//计算spu数量
			computedNum() {
				return (item) => {
					if (this.commonityItem.type == 1) { //普通商品
						if (!item.children || item.children.length == 0) return
						let arr = item.children && item.children.length ? item.children.map(it => it.qty) : [];
						console.log(arr,'computedNum');
						return arr.reduce((init, item) => {
							return init += item
						}, 0)
					}

				}

			},
			computedCount(){
				// this.getList();
				console.log(this.commonityItem);
				 // newCountArr = this.commonityItem.commodityInfo && this.commonityItem.commodityInfo.map( (item) => {item.children.map(item => item.qty)})
				  let newCountArr = [];
				if (this.commonityItem.commodityInfo) {
				
				  this.commonityItem.commodityInfo.forEach((item) => {
				    newCountArr = (item.children.map(child => child.qty));
				  });
				  
				}

				console.log(newCountArr,'newCountArr');
				return newCountArr.reduce((init, item) => {
					return init += item
				}, 0)
			},
			//计算总件数
			computedCountNum() {
				if (this.commonityItem.type == 1) { //普通商品
					//先循环所有选中的spu
					let commonitySpuArr = this.commonityItem.commodityInfo.filter(it => it.spuChecked == true)
					let numArr = []
					//拿到所有的价格
				
					commonitySpuArr.forEach(item => {
						numArr.push(...item.children.filter(it => it.skuChecked == true).map(it => it.qty))
					})
				
					//累加计算
					return numArr.reduce((init, item) => {
						return init += item
					}, 0)
				}
				if (this.commonityItem.type == 2) { //活动商品
					//先循环所有选中的spu
					let numArr = this.commonityItem.commodityInfo.filter(it => it.checked == true).map(item => item.qty)
					//累加计算
					
					return numArr.reduce((init, item) => {
						return init += item
					}, 0)
				}
			}
		},
		data() {
			return {
				uploadImgUrl,
				statusBarHeight: '',
				height: '',
				commonityItem: {}, //商品信息
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('mian_applyService')
			})
			this.getList();
		},
		methods: {
			//退货
			returnCause() {
				let arr = []
				//如果没有选择 提示先选择
				console.log(this.commonityItem.commodityInfo)
				if (this.commonityItem.type == 1) { //普通商品
					arr = this.commonityItem.commodityInfo.filter(item => item.spuChecked)
				} else {
					arr = this.commonityItem.commodityInfo.filter(item => item.checked)
				}
				if (arr.length == 0) {
					this.Utils.toast(`请选择退货商品`)
					return
				}
				//保存操作之后的数据
				console.log(this.commonityItem,'修改后的商品');
				// this.$store.commit('updateCommonityItem', this.commonityItem)
				
				// uni.navigateTo({
				// 	url: '/page_public/returnCause'
				// })
					// 页面跳转 判断当前页面栈是否大于10
								if(getCurrentPages().length<10){
									uni.navigateTo({
										url: '/page_public/returnCause'
									})
								} else{
										
									uni.redirectTo({
										url: '/page_public/returnCause'
									})
								}
				
			},
			//获取数据
			getList() {
				//获取数据
				this.commonityItem = this.$store?.state?.commonityItem || {}
				console.log(this.commonityItem,'退货总件数');
				//普通商品
				if (this.commonityItem.type == 1) {
					//循环数据 添加选中字段
					this.commonityItem.commodityInfo = this.commonityItem.commodityInfo.map(item => {
						if (item.children && item.children.length) {
							item.children = item.children.map(it => {
								return {
									...it,
									skuChecked: false,
									oldQty: it.qty //记录原始数量 操作增加数量不允许超过
								}
							})
						}
						return {
							...item,
							spuChecked: false,
						}

					})
					
				}

				//活动商品
				if (this.commonityItem.type == 2) {
					//循环数据 添加选中字段
					this.commonityItem.commodityInfo = this.commonityItem.commodityInfo.map(item => {
						return {
							...item,
							checked: false,
							oldQty: item.qty //记录原始数量 操作增加数量不允许超过
						}

					})
				}
				
					this.commonityItem.commodityInfo.map(item => {
						let qtyArr =   []
						item.children.map(it => {
							qtyArr.push(it.qty)
						})
						// qtyArr.push(item.qty)
						  console.log(qtyArr,'qtyArr');
						const totalCount = qtyArr.reduce(((prev, next) => prev + next), 0)
                       console.log(totalCount,'totalCount');
						item.totalCount = totalCount
                       return item
					})
				
				console.log(this.commonityItem,'this.commonityItem');
			},

			//点击选择一个商品 活动商品
			selectChecked(index) {
				//修改当前选择状态
				this.commonityItem.commodityInfo[index].checked = !this.commonityItem.commodityInfo[index].checked

			},

			//点击勾选sku 普通商品(孩子)
			tapSkuChecked(spuIndex, skuIndex) {
				console.log(this.commonityItem.commodityInfo[spuIndex].children[skuIndex].skuChecked,'孩子');
				// this.commonityItem.commodityInfo[spuIndex].children[skuIndex].skuChecked = !this.commonityItem
				// 	.commodityInfo[spuIndex].children[skuIndex].skuChecked
				this.$set(this.commonityItem.commodityInfo[spuIndex].children[skuIndex], 'skuChecked', !this.commonityItem.commodityInfo[spuIndex].children[skuIndex].skuChecked);

                 console.log(this.commonityItem.commodityInfo[spuIndex].children[skuIndex].skuChecked,'孩子');
				//sku勾上一个 spu就选中
				if (this.commonityItem.commodityInfo[spuIndex].children.some(item => item.skuChecked == true)) {
					this.commonityItem.commodityInfo[spuIndex].spuChecked = true
				} else {
					this.commonityItem.commodityInfo[spuIndex].spuChecked = false
				}



			},
			//点击勾选spu 普通商品
			tapSpuCkeched(e,index) {
				//修改当前选择状态
				this.commonityItem.commodityInfo[index].spuChecked = !this.commonityItem.commodityInfo[index].spuChecked
				//子级全部勾选
				console.log(this.commonityItem.commodityInfo[index],'this.commonityItem.commodityInfo[index]');
				this.commonityItem.commodityInfo[index].children.forEach(item => {
					console.log(item,'勾选',11111111);
					// item.skuChecked = this.commonityItem.commodityInfo[index].spuChecked
				  this.$set(item, 'skuChecked', this.commonityItem.commodityInfo[index].spuChecked);
				})
                console.log(this.commonityItem.commodityInfo[index],'子级');

			},
			//点击加号添加数量 
			addNum(it) {
				console.log(it.oldQty,'it.oldQty');
				++it.qty
				if (it.qty > it.oldQty) {
					this.Utils.toast(`超过原始数量`)
					it.qty = it.oldQty
					return
				}
			},
			//点击减号减少数量
			delNum(it) {
				console.log(it,'勾选');
				--it.qty
				if (it.qty <= 1) {
					it.qty = 1
					// it.skuChecked = false
					
				}
			},
			//数量输入框失去焦点
			blurNum(it) {
				console.log(it,it.oldQty,'数量');
				if(!it.qty) {
					this.Utils.toast(`数量不能为空`)
					it.qty = 1
					return
				}
				if (it.qty && it.qty <= 1) {
					it.qty = 1
					it.skuChecked = false
				} else if (it.qty > it.oldQty) {
					
					this.Utils.toast(`超过原始数量`)
					it.qty = it.oldQty
					
					return
				}

				// if (it.qty.startsWith('0') && !it.qty.includes('.')) {
				// 	it.qty = it.qty.slice(1, it.qty.length)
				// }
				it.qty = parseInt(it.qty)
				// this.getList()
			},	
			// 输入框输入值
			inputNum(it, index , inx){
				// if(!it.qty) {
				// 	this.Utils.toast(`数量不能为空`)
				// 	it.qty = 1
				// 	return
				// }
				// if (it.qty > it.oldQty) {
				// 	this.Utils.toast(`超过原始数量`)
				// 	it.qty = it.oldQty
				// 	this.$set(this.commonityItem.commodityInfo[index].children[inx],'qty', it.oldQty)	
				// 	return
				// }
				// it.qty = parseInt(it.qty)
			},
			
			//返回上一页
			navToBack() {
				// uni.navigateTo({
				// 	url: '/page_public/orderDetails'
				// })
				// 返回按钮 判断当前页面栈是否大于10
								if(getCurrentPages().length<10){
									uni.navigateBack()
									
								} else{
									uni.redirectTo({
										url: '/page_public/orderDetails'
									})
								}
			}
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.u-checkbox-group .u-checkbox__icon-wrap {
		width: 32rpx !important;
		height: 32rpx !important;
		border-radius: 16rpx !important;
	}
	/deep/.u-checkbox-group .u-icon__icon.uicon-checkbox-mark {
		font-weight: bold !important;
		font-size: 24rpx !important;
	}
	.mian_applyService {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 88rpx;

		.shoppingList_item {

			// height: 160px;
			width: 100%;
			// border: 1px solid red;
			border-bottom: 1px solid #f3f3f3;
			background-color: #FFF;
			box-sizing: border-box;
         /deep/.uni-checkbox-input.uni-checkbox-input-checked {
			     color: #fff !important;
			     font-weight: bold !important;
		 }
			.shoppingList_item_top {
				display: flex;
				align-items: center;

				.checkbox {
					width: 40rpx;

				}

				.item_img {
					width: 120rpx;
					height: 120rpx;

				}

				.item_right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 120rpx;

					.item_right_name {
						font-size: $font_size_12;
						color: $text_color_333;
					}

					.item_right_unit {
						font-size: $font_size_12;
						color: $text_color_808080;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}


				}
			}

			.shoppingList_item_bom {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.shoppingList_item_bom_r {
					flex: auto;


					.shoppingList_item_bom_r_t {
						display: flex;
						justify-content: space-between;

						.shoppingList_item_bom_r_l {
							display: flex;
							align-items: center;

							.price {
								font-size: $font_size_14;
								color: $text_color_ec4141;
								font-weight: bold;
							}

							.unit {
								font-size: $font_size_12;
								color: $text_color_808080;
								width:240rpx
							}
						}
					}

					.shoppingList_item_bom_r_b {
						width: 250rpx;
						max-width: 300rpx;
						font-size: $font_size_12;
						color: $text_color_ec4141;
						border-radius: 80rpx;
						border: 1px solid $text_color_ec4141;
						padding: 5rpx 10rpx;
						background-color: rgba(255, 247, 247, 1);
					}

				}
			}


		}

		.mian_allOrder_list_item {
			box-sizing: border-box;
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f3f3f3;
			background-color: #FFF;

			.list_item_checked {
				width: 40rpx;
				display: flex;
				align-items: center;
				margin-right: 10px;
			}

			.list_item_conter {
				flex: 1;
				border-bottom: 1px solid #f3f3f3;

				.list_item_conter_top,
				.list_item_conter_bom {
					display: flex;

					.list_item_conter_top_img {
						position: relative;
						border-radius: $border_radius_4;
						width: 120rpx;
						height: 120rpx;

						.zenpin {
							position: absolute;
							left: 0;
							top: 0;
							z-index: 999;
							width: 80rpx;
							height: 32rpx;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.list_item_conter_top_text {
						flex: 1;

						.list_item_conter_top_text_top {
							font-size: $font_size_12;
							color: $text_color_333;
						}

						.list_item_conter_top_text_bom {
							.list_item_conter_top_text_bom_item {
								font-size: $font_size_12;
								display: flex;
								justify-content: space-between;

								.list_item_conter_top_text_bom_item_l {
									color: $text_color_808080;
								}

								.list_item_conter_top_text_bom_item_r {
									color: $text_color_333;
								}
							}

							.biaoqian {
								color: $text_color_ec4141;
								font-size: $font_size_12;
								padding: 4rpx 10rpx;
								background-color: #FFE3E3;
								width: 150rpx;
								text-align: center;
								border-radius: $border_radius_4;
							}

						}
					}
				}

				.list_item_conter_bom {
					margin-left: 100rpx;
				}
			}


		}



	}

	// 计步器
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
		 /deep/.u-icon__icon.uicon-minus {
							font-weight: bold !important;
							color:#fff !important;
							font-size: 18rpx !important;
						}
	}

	.active {
		border: none;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		/deep/.u-icon__icon.uicon-plus{
									font-weight: bold !important;
									font-size: 18rpx !important;
								}
	}

	/deep/.u-input {
		background-color: transparent !important;
	}

	.mian_applyBom {
		width: 100%;
		height: 88rpx;
		background-color: #FFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.mian_applyBom_number {
			font-size: $font_size_14;
			color: $text_color_333;
		}

		.mian_applyBom_btn {
			width: 180rpx;
			height: 100%;
			background-color: $text_color_ec4141;
			color: #FFF;
			font-weight: bold;
			text-align: center;
			line-height: 88rpx;
		}
	}

	/deep/.uni-checkbox-input-checked {
		color: #FFF;
		background-color: #FF0000;
	}
</style>